<template>
  <div class="searchBox">
      <div class="inputArea">

          <div class="select">

            <div class="select_btn"
                @click.stop="showCityList=!showCityList">
                <span>{{selectedCity}}</span>
                <i class="iconfont icon-arrow"></i>
            </div>

            <!-- 城市列表 -->
            <transition name="slide_all">
                <div class="cityListWrap" v-show="showCityList">
                    <city-list @click="getCity"></city-list>
                </div> 
            </transition>

          </div>

          <div class="input">
              <input type="text" v-model="searchKeyword" @keyup="searchNotice" :placeholder="addrType=='start'?'选择起点':'您要去哪儿'"/>
          </div>

          <div class="cancel" @click="$emit('cancel')">取消</div>

      </div>

      <div class="wrap">
          <div class="collect">

            <div class="item home" @click.stop="selectAddr(commonAddr.home,true)">
                <i class="iconfont icon-home"></i>
                <div>
                    <b>家</b>
                    <div class="setAddr">{{commonAddr.home==''?'设置家庭地址':'已设置'}}</div>
                </div>
            </div>

            <div class="item company" @click.stop="selectAddr(commonAddr.company,true)">
                <i class="iconfont icon-company"></i>
                <div>
                    <b>公司</b>
                    <div class="setAddr">{{commonAddr.company==''?'设置公司地址':'已设置'}}</div>
                </div>
                
            </div>

          </div>
            <!-- 搜索的地址列表 -->
          <div class="list">
              <div class="list_item item"
                    v-for="(loc,index) in addrList"
                    @click="selectAddr(loc)"
                    :key="index">
                <i class="iconfont icon-dot"></i>
                <div>
                    <em>{{loc.name||loc.title}}</em>
                    <div class="list_item_addr">{{loc.address}}</div>
                </div>
              </div>
          </div>

      </div>
  </div>
</template>

<script>
    import cityList from './child/cityList.vue'
    import {addressSearch} from '@s/map.js'
    import {mapGetters} from 'vuex'
    import {getCommonAddr,searchNotice} from '@/http'
    export default {
        name:'searchBox',
        data(){
            return{
                showCityList:false,
                searchKeyword:''
            }
        },
        components:{cityList},
        props:['addrType'],
        computed:{
            ...mapGetters(['selectedCity','curAddrType','addrList','commonAddr']),
            home_isExist(){
                
            },
            company_isExist(){

            }
        },
        methods:{
            searchNotice(){
                searchNotice({keyword:this.searchKeyword,region:this.selectedCity}).then((data)=>{
                    this.$store.dispatch('loadAddrList',data.data)
                })
            },
            //在城市列表里选择后
            getCity(city){
                this.$store.dispatch('switchCity',city)
                this.showCityList = false;
            },
            selectAddr(loc,filter){
                let pos = null;
                if(filter){
                    pos = loc;
                }else{
                    pos = {
                            lat:loc.latLng?loc.latLng.lat:loc.location.lat,
                            lng:loc.latLng?loc.latLng.lng:loc.location.lng,
                            province:'',
                            city:'',
                            addr:loc.address,
                            name:loc.name||loc.title
                        };
                }
                this.$emit('selectAddr',pos)
            },
            // 获取常用地址
            getCommonAddr(){
                if(!this.commonAddr||!this.commonAddr.home||!this.commonAddr.company){
                    getCommonAddr().then((data)=>{
                        let _addrs =data.data.rows;
                        let addrs = {};

                        for(let i=0;i<_addrs.length;i++){
                            if(_addrs[i].type==2){
                                addrs.home={
                                    lat:_addrs[i].latitude,
                                    lng:_addrs[i].longitude,
                                    province:'',
                                    city:_addrs[i].city,
                                    addr:_addrs[i].address,
                                    name:_addrs[i].name
                                }
                            }else if(_addrs[i].type==3){
                                
                                addrs.company={
                                    lat:_addrs[i].latitude,
                                    lng:_addrs[i].longitude,
                                    province:'',
                                    city:_addrs[i].city,
                                    addr:_addrs[i].address,
                                    name:_addrs[i].name
                                }
                            }
                        }
                        this.$store.dispatch('commonAddr',addrs);
                    })
                }
            }
        },
        watch:{
            selectedCity(val){
                //当前城市改变后重新定位搜索周边
                addressSearch({
                    region:val,
                    callback:(res)=>{
                    this.$store.dispatch('loadAddrList',res.detail.pois)
                }})
            }
        },
        mounted(){
            this.getCommonAddr()
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../style/var.scss';

    .item{
        display: flex;
        align-items: center;
        padding:20px;
        box-shadow: 0 1px 1px 0 $border_base;
        .iconfont,div div{color:$font_color_sub;}
        i{
            padding-right:20px;
        }
    }

    .cityListWrap{
        position: fixed;
        top:0;
        left:0;
        z-index: 1000;
        width:100%;
        height:100%;
        margin-top:151px;
    }

    .searchBox{
        width:100%;
        height:100%;
        .inputArea{
            display: flex;
            align-items:center;
            justify-content: space-between;
            width:100%;
            height:150px;
            box-shadow: 0 1px 0 1px $border_base;
            padding:0 50px;
            background: #fff;

            .select_btn{
                span{
                    display: inline-block;
                    // width:200px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .icon-arrow{
                    color:$font_color_sub;
                    font-size: 14px;
                }
            }
        }

        .wrap{
            position: relative;
            margin:25px;
            height:1500px;
            padding-top:200px;
            box-shadow: 0 0 10px 1px $border_base;
            background: #fff;
            

            .collect{   
                position: absolute;
                top:0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-shadow: 0 1px 0 $border_base;
                width:100%;
                height:200px;
                padding:20px;
                .item{
                    box-shadow: none;
                    width:50%;
                }
                .setAddr{
                    font-size: 14px;
                }
            }
            .list{
                width:100%;
                height:100%;
                overflow-x: auto;
                .list_item_addr{
                    font-size: 14px;
                }
            }
        }
    }
</style>

